<template>
	<div id="container">
		<el-card class="login-container">
			<div slot="header" class="login-title"><p>用户注册</p></div>
			<el-form
				ref="loginForm"
				status-icon
				:model="Form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item label="用户名" prop="username">
					<el-input
						v-model="Form.username"
						placeholder="请输入用户名"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					<el-input
						type="password"
						v-model="Form.password"
						show-password
						placeholder="请输入密码"
					></el-input>
				</el-form-item>
				<el-form-item prop="checkpass">
					<label slot="label">确认密码</label>
					<el-input
						type="password"
						v-model="Form.checkpass"
						show-password
						placeholder="请再次输入密码"
					></el-input>
				</el-form-item>
				<!-- 验证码组件 -->
				<el-form-item class="verifycode" label="验证码" prop="verifycode">
					<el-input
						v-model="Form.verifycode"
						placeholder="不区大小写"
					></el-input>
					<verify-code @getIdentifyCode="getCode" :key="timer"></verify-code>
				</el-form-item>
				<el-form-item class="btns">
					<el-button type="primary" size="small" @click="register()">
						注册
					</el-button>

					<el-button size="small" @click="reset">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import VerifyCode from '../Login/VerifyCode.vue';
export default {
	name: 'Register',
	components: {
		VerifyCode,
	},
	data() {
		/* 自定义用户名的校验规则 */
		var checkUesrname = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('用户名不能为空'));
			} else {
				this.$http.post('/user/username', { user_name: value }).then((res) => {
					const { code } = res;
					if (code == 0) {
						return callback(new Error('该用户已存在'));
					} else {
						callback();
					}
				});
			}
		};
		/* 自定义验证码的校验规则 */
		var checkCode = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('验证码不能为空'));
			} else if (value.toLowerCase() !== this.realCode) {
				callback(new Error('验证码错误'));
			} else {
				callback();
			}
		};
		// 定义再次输入密码的校验规则
		var checkpass2 = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请再次输入密码'));
			} else if (value !== this.Form.password) {
				callback(new Error('两次输入的密码不一致'));
			} else {
				callback();
			}
		};
		return {
			realCode: '', //验证码图片上的真实验证码
			timer: '', //定义一个时间戳用于重新加载验证码组件，原理是给验证码组件绑定一个:key
			// 只要key发生变化，则子组件重新渲染
			Form: {
				username: '',
				password: '',
				checkpass: '', //存储用户再次输入的密码
				verifycode: '',
			},
			rules: {
				username: [{ validator: checkUesrname, trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				checkpass: [{ validator: checkpass2, trigger: 'blur' }],
				verifycode: [{ validator: checkCode, trigger: 'blur' }],
			},
		};
	},

	methods: {
		register() {
			// 校验表单
			this.$refs['loginForm'].validate((valid) => {
				if (valid) {
					// 验证成功则需要向后端添加用户
					const userInfo = {
						user_name: this.Form.username,
						user_password: this.Form.password,
						user_type: 'user',
					};
					this.$http.post('/user', userInfo).then((res) => {
						const { code, message } = res;
						if (code == 0) {
							this.$confirm('您已注册成功，是否使用该账号登录?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning',
							})
								.then(() => {
									this.$http.post('/login', this.Form).then((res) => {
										const { code, msg, userType } = res;
										if (code == 0) {
											// 将数据库生成的token存放在浏览器的localStorage属性中
											window.localStorage.setItem('token', res.token);
											if (userType == 'user') {
												this.$store.commit('defUserType', true);
											} else if (userType == 'traffic') {
												this.$store.commit('defUserType', false);
											}
											this.timer = new Date().getTime();
											this.$router.push('/');
										} else {
											this.$message.error(msg);
											// 当登录失败要改变验证码
											this.timer = new Date().getTime();
										}
									});
								})
								.catch(() => {
									this.$message({
										type: 'info',
										message: '已取消登录该用户',
									});
									this.$router.push('/login');
								});
						}
					});
				} else {
					this.$message.error('注册失败');
					// 当注册失败要改变验证码
					this.timer = new Date().getTime();
				}
			});
		},
		reset() {
			this.Form.username = '';
			this.Form.password = '';
			this.Form.checkpass = '';
			this.Form.verifycode = '';
		},

		getCode(code) {
			this.realCode = code;
		},
	},
};
</script>

<style>
#container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background-image: url('img/register.gif');
	background-repeat: no-repeat;
	background-size: cover;
}
.login-container {
	height: 400px;
	width: 400px;
	background: rgba(172, 219, 83, 0.6);
}
.el-card__header {
	height: 10% !important;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(255, 69, 0) !important;
}
.login-title {
	height: 60px;
	width: 400px;
	display: flex;
	align-items: center;
}
.login-title p {
	font-size: 22px;
	font-weight: 900;
	color: white;

	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.el-card__body {
	width: 100%;
	height: 400px;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}
.el-form-item__label {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
.verifycode {
	display: flex;
	align-items: center;
	justify-content: center;
}

.verifycode .el-form-item__content {
	width: 280px !important;
	height: 45px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}
.verifycode input {
	width: 150px;
}
.btns {
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btns .el-form-item__content {
	margin: 0 !important;
	padding: 0 !important;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.btns button:hover {
	text-decoration: underline;
	font-weight: 900;
}

/* 输入框右边的绿色勾勾 */
.el-input__suffix {
	color: rgb(48, 242, 48);
	font-weight: 900;
}
</style>
